<template>
    <div class="background">
        <div class="window">
            <el-tabs v-model="activeName" class="myTabs" @tab-click="handleClick">
                <el-tab-pane label="短信登录" name="message" >
                    <Login @on-submit="handleSubmit">
                        <Mobile name="phone" />
                        <Captcha name="code" :field="['phone']" @on-get-captcha="handleGetMsgCode" />
                        <Submit shape="circle" class="mySubmit" />
                    </Login>

                    <Checkbox v-model="single" class="userControl">我已阅读并同意服务条款隐私政策</Checkbox>

                    <div class="other">
                         <span>其他登陆方式</span>
                         <Row justify="center" class="code-row-bg ">
                                    <Col span="4" class="iconfont icon-qq qq"></Col>
                                    <Col span="4" class="iconfont icon-weixin weixin"></Col>
                                    
                         </Row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="密码登录" name="password" >
                    <Login @on-submit="handleSubmit">
                            <Mobile name="phone" />
                            <Password name="password" />
                            <Captcha class="demo-login-captcha" @on-focus="imgCodeInputFocus" @on-change="codeInputChange" @on-blur="checkImgCode" name="captcha" :count-down="0" @on-get-captcha="changeImgCode">
                                <template #text>
                                 <img src="http://localhost:8080/code/setCode" ref="img" width="117" height="40">
                                </template>
                           </Captcha>
                           <span class="imgMsg"  v-if="imgCode?imgCodeFlag:false">验证码错误</span>
                            
                           <Submit />
                    </Login>
                    <div class="other">
                         <span>其他登陆方式</span>
                         <Row justify="center" class="code-row-bg ">
                                    <Col span="4" class="iconfont icon-qq qq"></Col>
                                    <Col span="4" class="iconfont icon-weixin weixin"></Col>
                                    
                         </Row>
                    </div>
                </el-tab-pane>
             </el-tabs>

            
             <!-- //注册填写框 -->
             <Modal v-model="modal" width="500" class="register" >
            <template #header>
                <p style="color:#2D8CF0;text-align:center">
                    <Icon type="ios-information-circle"></Icon>
                    <span> 注册信息</span>
                </p>
            </template>
            <div style="text-align:center">
                <Steps :current="current">
                    <Step title="设置密码" icon="md-lock"></Step>
                    <Step title="基本信息" icon="md-clipboard" ></Step>
                 </Steps>
                 <el-carousel arrow="never" :autoplay="false" ref="carousel" :class="myClass[current]" :pause-on-hover="false" :loop = "false" trigger="none" indicator-position="none" interval="999999999" >
                    <el-carousel-item  >

                        <!-- 设置密码 -->
                        <el-form
                            :model="registerform"
                            status-icon
                            :rules="rules"
                            label-width="120px"
                            class="demo-ruleForm"
                        >

                        <el-form-item label="初始密码" prop="pass">
                                <el-input v-model="registerform.password" type="password" autocomplete="off" />
                        </el-form-item>
                        
                        </el-form>

                     </el-carousel-item>
      
                     <!-- 设置基本信息 -->
                     <el-carousel-item >
                        <el-form
                            :model="registerform"
                            status-icon
                            :rules="rules"
                            label-width="120px"
                            class="demo-ruleForm"
                        >
                        <el-form-item label="姓名" prop="name">
                                <el-input v-model="registerform.name" type="text" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="学号" prop="number">
                                <el-input v-model="registerform.number" type="text" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="学校" prop="school">
                                <el-input v-model="registerform.school" type="text" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="身份" prop="role">
                            <el-select v-model="registerform.role" class="m-2" placeholder="Select" size="small">
                                    <el-option
                                    v-for="(item,index) in roles"
                                    :label="item"
                                    :value="index"
                                    />
                            </el-select>
                        </el-form-item>
                        
                        </el-form>
                    </el-carousel-item>

                </el-carousel>
            </div>
            <template #footer>
                <Button type="info"  size="large" long :loading="modal_loading" @click="next">{{current==0 ? '设置':'首次注册' }}</Button>
            </template>
        </Modal>
        </div>
        
    </div>
</template>

<script>

import user from '../api/user.js'
    export default {
        data(){

            return {
                activeName:"message",
                single:false,
                imgCode:'',
                imgCodeFlag:'',
                imgCodeInput:'',
                modal: false,
                modal_loading:false,
                current:0,
                registerform:{
                    phone:'',
                    password:'',
                    name:'',
                    number:'',
                    school:'',
                    role:0,
                },
                roles:['老师','学生'],
                myClass:['mycontainer01','mycontainer02'],
            }
        },

        mounted(){
           
        }
,
        methods: {
            handleSubmit (valid, { phone, code,password}) {

                console.log({ phone, code,password })
                  

                if (!valid || this.imgCodeFlag ) 
                    return;
                else if(code && !this.single)
                    this.$Modal.info({
                        title: '提示：',
                        content: '请勾选用户协议'
                    });
                
               else{
               
                const   msg = this.$Message.loading({
                            content: '登录中...',
                            duration: 0
                        });
                
                   
                                
                    
                //短信验证码登录
                if(code)
                    user.loginByCodeApi( { phone, code }).then((res)=>{
                            setTimeout(msg, 0);

                            console.log(res);
                        
                            if(res.code == 1){


                                
                                if(res.data){
                                    localStorage.setItem("token",res.data)
                                    this.$router.replace("/")
                                }
                                else{
                                    this.registerform.phone = phone;
                                    this.modal = true
                                }
                                   
                                
                            }
                                    
                            else
                                    this.$Notice.error({title: '错误提示',desc:res.msg});
                        })


                
                //密码登录
                else if(!this.imgCodeFlag)
                    user.loginByPasswordApi( { phone, password }).then((res)=>{
                            setTimeout(msg, 0);
                            if(res.code == 1){
                                localStorage.setItem("token",res.data)
                                this.$router.replace("/")
                            }
                                    
                            else
                                    this.$Notice.error({title: '错误提示',desc:res.msg});
                        })

                        

               }
               
                  
               ;

          
            },
            //发送短信验证码
            handleGetMsgCode (valid, { phone, code }) {
                user.sendMsgApi(phone)
            }
            ,
            //切换图片验证码
            changeImgCode(){
                this.$refs.img.src = "http://localhost:8080/code/setCode?" + new Date().getTime();
            }
            ,
            codeInputChange(){
                if(!this.imgCodeInput.value)
                    this.imgCode = ''

            },

            imgCodeInputFocus(ev){
                this.imgCodeInput = ev.target
            },

            //检查图片验证码
            checkImgCode(ev){

                this.imgCode = ev.target.value

                 user.checkImgCodeApi(ev.target.value).then((res)=>{

                    if(res.code ==0)
                        this.imgCodeFlag = true
                    else
                        this.imgCodeFlag = false
                 })
            },

            //注册方法
            register () {
                this.modal_loading = true;
                user.registerApi(this.registerform).then((res)=>{
                    if(res.code == 1 ){
                        localStorage.setItem("token",res.data)
                        this.$router.replace("/")
                    }
                })
            }
            ,
            //步骤切换
            next () {
                  if(this.current != 1){
                    this.current += 1 ;
                    this.$refs.carousel.next()
                  }
                  else
                    this.register()
            },

        }
    }
</script>

<style >


   .background{
    position: relative;
    width: 100%;
    height: 100%;
    background-color:gold;
   }

    .window{
        position:absolute;
        right: 5rem;
        top:5rem;
        width: 28rem;
        height: 30rem;
        background-color: rgb(255, 255, 255);

        box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 15px;
        overflow: hidden;
        margin: 0px auto;
    }

   .myTabs{
        
        margin: 0 auto;
        margin-top: 1rem;
        width:25rem;
   }

   .myTabs .el-tabs__item{
      font-size: 18px;
   }

   .myTabs .el-tabs__nav-wrap::after{
       width: 0;

   }

   .myTabs .el-tabs__content{
      padding: 1rem;
   }

   .myTabs .ivu-login-submit .ivu-btn{
       
   }
   
   .myTabs .myButton{
       margin-top: 5rem;
   }

   .userControl{
    margin-top:2rem;
   }

   .myTabs .mySubmit{
        position: relative;
   }
   .myTabs .mySubmit button::after{
      content: "/注册";
   }

   .myTabs .ivu-btn-large{
    padding:0
   }

   .other{
      text-align: center;
      color:gray;
      padding-top:2rem;
   }

   .other .qq{
    cursor: pointer;
      color:#1FE0FC;
      font-size:30px

   }

   
   .other .weixin{
      cursor: pointer;
      color:#00CC00;
      font-size:30px
   }

   .myTabs .imgMsg {
    position: absolute;
    top:10.5rem;
    font-size: 15px;
     color: red;
   }

   .myTabs .ivu-form{
    position: relative;
   }

   /* .register .registerItem{
       height: 15rem;
       background-color: #00CC00;
   } */
   .register .el-carousel{
      box-sizing: border-box;
      text-align: center;
      padding: 1rem;
   }
/* 
   .register .el-carousel__container{
      height: fit-content;
   } */


   .register  .mycontainer01{
      height: 3rem;
      overflow:hidden
   }

   .register .mycontainer02{
     height: 13rem;
     overflow:hidden
    
   }

body,html,#app{
    height: 100%;
}
   .background{
    width: 100%;
    height: 100%;
    background: url('../assets/bg.webp');
   }
</style>